class UIGoods {
  constructor(info) {
    this.data = info;
    this.choose = 0;
  }
  // 获取单品价格
  getTotalPrice() {
    return this.data.price * this.choose;
  }

  // 单品是否被选择
  isChoose() {
    return this.choose > 0;
  }

  // 单品递增
  increase() {
    this.choose++;
  }

  // 单品递减
  decrease() {
    if (this.choose === 0) {
      return;
    }
    this.choose--;
  }
}

class UIData {
  constructor() {
    this.goods = goods.map(good => new UIGoods(good));
    this.deliveryPrice = 5;
    this.deliveryStartLinePrice = 30;
  }

  // 获取所有商品的价格
  getTotalPrice() {
    return this.goods.reduce((total, good) => {
      return total + good.getTotalPrice();
    }, 0);
  }

  // 或取所有商品的数量
  getTotalNum() {
    return this.goods.reduce((total, good) => {
      return total + good.choose;
    }, 0);
  }

  //是否选择某个商品
  isChoose(index) {
    return this.goods[index].isChoose();
  }

  // 递增某个商品
  increase(index) {
    this.goods[index].increase();
  }
  // 递减某个商品
  decrease(index) {
    this.goods[index].decrease();
  }
  // 购车是否有商品
  hasGoodsInCar() {
    return this.getTotalNum() > 0;
  }
  // 是否可配送
  isDelivery() {
    return this.getTotalPrice() >= this.deliveryStartLinePrice;
  }
  // 差多少钱配送
  getDeliveryPrice() {
    if (this.isDelivery()) {
      return 0;
    }
    return (this.deliveryStartLinePrice - this.getTotalPrice()).toFixed(2);
  }
}

class UI {
  constructor() {
    this.data = new UIData();
    this.doms = {
      goodsContainer: document.querySelector('.goods-list'),
      footer: document.querySelector('.footer'),
      footerCar: document.querySelector('.footer .footer-car'),
      footerBadge: document.querySelector('.footer .footer-car-badge'),
      totalPrice: document.querySelector('.footer-car-total'),
    }

    var carRect = this.doms.footerCar.getBoundingClientRect();

    var jumpTarget = {
      x: carRect.left + carRect.width / 2,
      y: carRect.top + carRect.height / 5,
    };

    console.log(jumpTarget);
    this.jumpTarget = jumpTarget;

    this.createHtml();
    this.listenAddEvent();
    this.updateFooter();
  }
  listenAddEvent() {
    this.doms.footerCar.addEventListener('animationend', () => {
      this.doms.footerCar.classList.remove('animate');
    })
  }

  // 渲染页面
  createHtml() {
    let html = '';
    this.data.goods.map((good, index) => {
      console.log(good);
      html += `<div class="goods-item">
          <img src="${good.data.pic}" alt="" class="goods-pic" />
          <div class="goods-info">
            <h2 class="goods-title">${good.data.title}</h2>
            <p class="goods-desc">
            ${good.data.desc}
            </p>
            <p class="goods-sell">
              <span>月售 ${good.data.sellNumber}</span>
              <span>好评率${good.data.favorRate}%</span>
            </p>
            <div class="goods-confirm">
              <p class="goods-price">
                <span class="goods-price-unit">￥</span>
                <span>${good.data.price}</span>
              </p>
              <div class="goods-btns">
                <i class="iconfont i-jianhao" data-index="${index}"></i>
                <span>${good.choose}</span>
                <i class="iconfont i-jiajianzujianjiahao" data-index="${index}"></i>
              </div>
            </div>
          </div>
        </div>`
    })

    this.doms.goodsContainer.innerHTML = html;
  }

  // 递增某个商品
  increase(index) {
    this.data.increase(index);
    this.updateGoodsItem(index);
    this.updateFooter();
    this.jump(index);
  }

  // 递减某个商品
  decrease(index) {
    this.data.decrease(index);
    this.updateGoodsItem(index);
    this.updateFooter();
  }

  // 更新商品信息
  updateGoodsItem(index) {
    const good = this.doms.goodsContainer.children[index];

    if (this.data.isChoose(index)) {
      good.classList.add('active');
    } else {
      good.classList.remove('active');
    }
    const span = good.querySelector('.goods-btns span')
    span.textContent = this.data.goods[index].choose;
  }

  // 更新底部信息
  updateFooter() {
    this.doms.footer.querySelector('.footer-car-tip').textContent = `配送费￥${this.data.deliveryPrice}`

    if (this.data.hasGoodsInCar()) {
      this.doms.footerCar.classList.add('active');
    } else {
      this.doms.footerCar.classList.remove('active');
    }
    const badge = this.doms.footerCar.querySelector('.footer-car-badge');
    badge.textContent = this.data.getTotalNum();

    const footerPay = this.doms.footer.querySelector('.footer-pay');
    footerPay.querySelector('span').textContent = `还差￥${this.data.getDeliveryPrice()}元起送`

    if (this.data.isDelivery()) {
      footerPay.classList.add('active');
    } else {
      footerPay.classList.remove('active');
    }

    this.doms.totalPrice.textContent = this.data.getTotalPrice().toFixed(2);
  }
  // 购物车动画
  carAnimate() {
    this.doms.car.classList.add('animate');
  }
  jump(index) {
    const btn = this.doms.goodsContainer.children[index].querySelector('.goods-btns .i-jiajianzujianjiahao');
    const ract = btn.getBoundingClientRect();

    const start = {
      x: ract.left,
      y: ract.top,
    }

    const div = document.createElement('div');
    div.className = 'add-to-car';
    var i = document.createElement('i');
    i.className = 'iconfont i-jiajianzujianjiahao';
    // 设置初始位置
    div.style.transform = `translateX(${start.x}px)`;
    i.style.transform = `translateY(${start.y}px)`;
    div.appendChild(i);
    document.body.appendChild(div);
    // 强行渲染
    div.clientWidth;

    // 设置结束位置
    div.style.transform = `translateX(${this.jumpTarget.x}px)`;
    i.style.transform = `translateY(${this.jumpTarget.y}px)`;
    console.log(div);
    div.addEventListener('transitionend', () => {
      console.log('99');
      div.remove();
      this.carAnimate();
    }, {
      once: true
    })
  }
}

const page = new UI();
page.doms.goodsContainer.addEventListener('click', (e) => {
  if (e.target.classList.contains('i-jiajianzujianjiahao')) {
    page.increase(e.target.dataset.index);
  } else if (e.target.classList.contains('i-jianhao')) {
    page.decrease(e.target.dataset.index);
  }
})